<template>
    <div class="add">
        <input type="text" v-model.trim="msg">
        <button @click="collectionAdd">添加</button>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                msg:"",
            };
        },
        methods:{
            collectionAdd(){
                // 查看是否能收集到数据
                // console.log(this.msg);
                // 将得到的数据传递给父组件app
                if(!this.msg){
                    // 判断不能添加空串
                    return;
                }else{
                    this.$emit("addItem",this.msg);
                    // 清空操作
                    this.msg="";
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .add{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 160px;

        input{
            height: 80px;
        }
    }
</style>